<template>
  <el-scrollbar class="pd-6">
    <el-collapse :model-value="['0', '1', '2', '3']">
      <el-collapse-item v-for="(item ,index) in collapseList" :key="item.title" :name="String(index)">
        <template #title>
          <el-divider content-position="left">{{ item.title }}</el-divider>
        </template>
        <div>
          <VueDraggableNext :list="item.list" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneData" class="flex-list">
            <div class="list-group-item" v-for="element in item.list" :key="element.name">
              <SvgIcon :iconName="element.icon"></SvgIcon>
              <span>{{ element.name }}</span>
            </div>
          </VueDraggableNext>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>
<script setup>
import { layoutContainerList, basicsContainerList, formContainerList, advancedContainerList } from './viewComponents/config'
import { VueDraggableNext } from 'vue-draggable-next'
import { cloneDeep } from 'lodash-es'
import { uuidHash } from '@/utils/index'
const collapseList = [
  {
    title: '布局区域',
    list: layoutContainerList
  }, {
    title: '基础区域',
    list: basicsContainerList
  }, {
    title: '表单区域',
    list: formContainerList
  }, {
    title: '高级区域',
    list: advancedContainerList
  }]

// const onMove = (event) => {
//   console.log(event, 'onMove')
// }
// const onStart = (event) => {
//   console.log(event, 'onStart')
// }
// const onEnd = (event) => {
//   console.log(event, 'onEnd')
// }
const cloneData = (event) => {
  const data = cloneDeep(event)
  data.key = uuidHash()
  return data
}

</script>
<style lang="scss" scoped>
  .pd-6{
    padding: 6px;
    box-sizing: border-box;
  }
  .flex-list{
    display: flex;
    flex-wrap: wrap;
  }
  .list-group-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: move;
    margin: 10px;
    width: 55px;
    span{
      line-height: 36px;
    }
  }
  .ghost {
      width: 100%;
      height: 2px !important;
      background-color: #2a83ea !important;
      overflow: hidden;
      outline: 0px !important;
      z-index: 9999;
      div {
        display: none;
      }
    }
</style>
